<template>
  <div style="padding: 0 24px">
    <a-row style="margin: 24px 0" type="flex" align="middle" justify="space-between">
      <a-col>
        <a-button @click="download"> 导出错误数据 </a-button>
      </a-col>
      <a-col></a-col>
    </a-row>
    <div class="xq-form-wrapper">
      <a-spin :spinning="spinning" class="xq-form-content">
        <a-table :scroll="{ x: columns.length * 70 }" :pagination="false" :dataSource="tableData" :columns="columns" bordered>
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in num" :slot="`k.${index}.key`" slot-scope="text, record">
            <span v-if="record.k[num - 1].key === '系统内无此人'" :key="index">
              <span style="color: #fa5051" v-if="index === 0 || index === 1 || index === num - 1"> {{ text }} </span>
              <span v-else> {{ text }} </span>
            </span>
            <span v-else :key="index">
              <span :style="record.k[index].val === 0 ? '' : 'color:#FA5051;'"> {{ text }}</span>
            </span>
          </template>
        </a-table>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import { mapState } from "vuex";
import { getAttendanceDataTempAllAndError } from "../api";
export default {
  props: {
    talentPoolTempId: {
      type: String,
      default: ""
    },
    vJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      columns: [],
      status2: [
        { value: 1, label: "试用", name: "countWaitInformalAll", count: 0 },
        { value: 2, label: "正式", name: "countHasInformalAll", count: 0 }
      ],
      num: 0,
      spinning: false,
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 20,
      errorDataCount: 0,
      visibleDrawer: false,
      form: this.$form.createForm(this, {}),
      channelId: "",
      newType: 0,
      status: 0
    };
  },
  computed: {
    ...mapState(["hr"]),
    channelsList() {
      return this.hr.channelsList;
    }
  },
  created() {
    this.onGetAttendanceDataTempAllAndError();
  },
  methods: {
    async onGetAttendanceDataTempAllAndError() {
      try {
        this.spinning = true;
        const { data } = await getAttendanceDataTempAllAndError({
          recordId: this.vJson.recordId,
          tempId: this.vJson.tempId,
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          "orders[0].property": "gmtCreate",
          "orders[0].desc": true
        });
        this.columns = this.columnsFun(data.headData);
        this.tableData = this.tableDataFun(data.errorData);
        this.total = data.errorDataCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    columnsFun(data) {
      const columnsDef = [
        {
          title: "姓名",
          dataIndex: "k.0.key",
          scopedSlots: { customRender: "k.0.key" },
          width: 100
        },
        {
          title: "手机号",
          dataIndex: "k.1.key",
          scopedSlots: { customRender: "k.1.key" },
          width: 150
        }
      ];
      const columns = [];
      const headDataLength = data.length;
      const num = data.length * 31 + 2;
      this.num = num + 1;
      const result = [];
      const columns2 = [];
      for (let i = 0; i < num; i++) {
        if (i > 1) {
          const json = {
            title: "",
            dataIndex: `k.${i}.key`,
            scopedSlots: { customRender: `k.${i}.key` },
            width: 100
          };
          columns.push(json);
        }
      }
      for (let i = 0, len = columns.length; i < len; i += headDataLength) {
        result.push(columns.slice(i, i + headDataLength));
      }
      result.forEach((e, i) => {
        e.forEach((x, y) => {
          x.title = data[y];
        });
        columns2.push({
          title: i + 1,
          children: e
        });
      });
      columns2.splice(0, 0, {
        title: "异常状态",
        dataIndex: `k.${num}.key`,
        scopedSlots: { customRender: `k.${num}.key` },
        width: 150
      });
      const c = columnsDef.concat(columns2);
      return c;
    },
    tableDataFun(data) {
      const allData = data;
      for (let i = 0; i < allData.length; i++) {
        const arr = [];
        const e = allData[i];
        for (let i = 0; i < e.length; i++) {
          e[i] = JSON.parse(e[i]);
          const json = {};
          for (const key in e[i]) {
            json.key = key === "null" ? "--" : key;
            json.val = e[i][key];
          }
          arr.push(json);
        }
        allData[i] = { k: arr };
      }
      return allData;
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetAttendanceDataTempAllAndError();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetAttendanceDataTempAllAndError();
    },
    download() {
      const token = this.$store.state.auth.token;
      let params = {};
      params = {
        // templateName: "allEmployeeSalary.xlsx"
      };
      axios({
        url: `/hr/api/v1/attendanceDataTemps/getErrorDataExcel/${this.vJson.recordId}`,
        params,
        paramsSerializer: (param) => {
          return qs.stringify(param, { indices: false });
        },
        method: "GET",
        responseType: "blob",
        headers: {
          token: token
        }
      })
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel"
          });
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", "考勤工资模板.xlsx");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        })
        .catch((err) => {
          console.log("error log --> ", err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.tit {
  font-size: 16px;
  font-weight: 500;
  color: #252525;
  span {
    color: #fa5051;
  }
}
.tags {
  display: flex;
  div {
    padding: 0 8px;
    height: 22px;
    line-height: 22px;
    margin-right: 8px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
  }
}
.submitBox {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 70px;
  width: 100%;
  border-top: 1px solid #e9e9e9;
  padding-top: 20px;
  background: #fff;
  text-align: center;
  // z-index: 1;
}
</style>
